<template>
  <div class="viewbox">
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple">&nbsp;</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <img
            class="backimg"
            src="../../assets/img/loginback1.png"
            alt=""
          /></div
      ></el-col>

      <el-col :span="6" class="loginbox">
        <el-form :model="form" label-width="90px" label-position="left">
          <div class="logintext">
            <img src="../../assets/img/logoo.png" alt="" />
            <div>
              <p>旷野车辆管理系统</p>
              <p>vehicle-management-system</p>
            </div>
          </div>
          <el-form-item label="用户名">
            <el-input v-model="form.name" @blur="adminfun()" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="form.password"
              @blur="passwordfun()"
            />
          </el-form-item>

          <!-- 随机验证码 -->
          <el-form-item
            prop="verifycode"
            style="line-height: 0px"
            label="验证码"
          >
            <el-input
              v-model="loginForm.verifycode"
              ref="verifycode"
              placeholder="验证码"
              class="identifyinput"
              style="width: 110px"
              @blur="checkfun()"
            ></el-input>
            <div class="identifybox" @click="refreshCode">
              <SIdentify :identifyCode="identifyCode"></SIdentify>
            </div>
          </el-form-item>

          <!-- <el-form-item label="权限" class="rightsbox" label-width="50px">
              <el-radio v-model="form.role" label="1">管理员A</el-radio>
              <el-radio v-model="form.role" label="2">管理员B</el-radio> 
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit(form)">登录</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">&nbsp;</div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import SIdentify from "../../components/rq/Sidentify.vue";
import { loginlink } from "../../apis/login";

export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
        role: "",
        checkword: "",
      },
      loginForm: {
        verifycode: "",
      },

      identifyCodes: "1234567890abcdefghijklmnopqrstuvwxyz", //验证码的数字库
      identifyCode: "", // 验证码组件传值
    };
  },
  components: {
    SIdentify,
  },

  methods: {
    // 封装了提示框的函数
    messagefun(content, type) {
      this.$message({
        message: content,
        type: type,
        center: true,
      });
    },
    // 验证码函数
    checkfun() {
      console.log("checked", this.identifyCode);
      console.log(this.loginForm.verifycode);
      if (this.identifyCode === this.loginForm.verifycode) {
        this.messagefun("验证成功", "success");
      } else if (this.loginForm.verifycode === "") {
        this.messagefun("请输入验证码", "warning");
      } else {
        this.messagefun("输入错误", "error");
      }
    },
    // 用户名和密码框失焦事件提醒
    adminfun() {
      if (this.form.name == "") {
        this.messagefun("请输入用户名", "warning");
      }
    },
    passwordfun() {
      if (this.form.password == "") {
        this.messagefun("请输入密码", "warning");
      }
    },

    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    tokenfun(n) {
      let sum = "";
      for (let i = 0; i < n; i++) {
        sum += this.randomNum(0, 9);
      }
      return sum;
    },
    // 登录
    onSubmit(form) {
      console.log("submit");

      console.log(
        form,
        "name",
        form.name,
        typeof form.name,
        "pass",
        form.password,
        typeof form.password
      );
      loginlink(form.name, form.password).then((ok) => {
        // console.log(this.form.name,this.form.password);
        // loginlink(this.form.name,this.form.password).then((ok)=>{
        //   console.log(ok);
        //    if(ok.data.code===200){
        //      if(this.identifyCode===this.loginForm.verifycode){
        //         this.messagefun("验证成功","success");
        //         // console.log("token",this.tokenfun(20));
        //         window.sessionStorage.setItem("token",ok.data.data.token);
        //         window.sessionStorage.setItem("username",this.form.name);
        //         this.$router.push('/home');
        //       }else{
        //         this.messagefun("验证码错误","warning")
        //       }
        //     }else if(ok.data.code===10001){
        //       this.messagefun("未注册","warning")
        //     }else if(ok.data.code===10003){
        //       this.messagefun("密码错误","warning")
        //     }
        // })

        // 模拟接口
        //   loginjson(this.form.name).then((ok)=>{
        //     console.log(ok);
        //     if(ok.data.length!==0){
        //       if(ok.data[0].password===this.form.password){
        //         this.messagefun("密码正确","success")
        //         if(this.identifyCode===this.loginForm.verifycode){
        //           this.messagefun("验证成功","success");
        //           // console.log("token",this.tokenfun(20));
        //           window.sessionStorage.setItem("token",this.tokenfun(20));
        //           window.sessionStorage.setItem("username",this.form.name);

        //           this.$router.push('/home');
        //         }

        //       }else{
        //         this.messagefun("密码错误","warning")
        //       }
        //     }else{
        //       this.messagefun("用户名不存在","warning")
        //     }
        //   })
        console.log(ok);
        if (ok.data.code === 200&&this.identifyCode===this.loginForm.verifycode) {
          window.sessionStorage.setItem("token", ok.data.data.token);
          window.sessionStorage.setItem("username",this.form.name);
          this.$router.push("/home");
        }
      });

      // 模拟接口
      // loginjson(this.form.name).then((ok)=>{
      //   console.log(ok);
      //   if(ok.data.length!==0){
      //     if(ok.data[0].password===this.form.password){
      //       this.messagefun("密码正确","success")
      //       if(this.identifyCode===this.loginForm.verifycode){
      //         this.messagefun("验证成功","success");
      //         // console.log("token",this.tokenfun(20));
      //         window.sessionStorage.setItem("token",this.tokenfun(20));
      //         window.sessionStorage.setItem("username",this.form.name);

      //         this.$router.push('/home');
      //       }

      //     }else{
      //       this.messagefun("密码错误","warning")
      //     }
      //   }else{
      //     this.messagefun("用户名不存在","warning")
      //   }
      // })
    },

    //验证码----start
    // randomNum(min, max) {
    //   return Math.floor(Math.random() * (max - min) + min);
    // },  //上面已经写过一遍

    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      // console.log("this.identifyCode:", this.identifyCode);
    },
    //验证码----end
  },

  created() {
    this.refreshCode(); //初始化验证码
  },

  mounted() {
    // 验证码初始化
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
};
</script>

<style lang="scss">
.viewbox {
  height: 100%;
}
.el-row {
  background-color: rgba(32, 74, 138, 0.849);
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
  .backimg {
    height: 400px;
    margin-top: 100px;
    margin-left: -100px;
  }
}
.loginbox {
  width: 400px;
  margin-top: 100px;
  background-color: rgba(94, 104, 122, 0.541);
  padding: 30px;
  border-radius: 10px;

  .logintext {
    height: 50px;
    display: flex;
    align-items: center;
    margin: 0px 60px 20px;
    .el-form-item__label {
      color: white;
    }
    img {
      height: 100%;
      vertical-align: middle;
    }
    p:nth-child(1) {
      font-size: 18px;
      color: #4990e2;
      margin-top: 5px;
    }
    p:nth-child(2) {
      font-size: 12px;
      color: #f5a623;
    }
  }
}
.el-form-item__label {
  color: #f5a623;
}

.el-form-item__content {
  display: flex;
}
</style>